import { useState, useEffect, useRef } from 'react';
import { Tooltip, Space, Card } from 'antd';
import { MenuOutlined, CheckOutlined } from '@ant-design/icons';
import DarkBtn from '../../../../../../common/DarkBtn';
import useMap from '../../hooks/useMap';
import './index.less';

// 导入图片
import satelliteImg from './images/影像图.png';
import terrainImg from './images/地形图.png';
import streetImg from './images/街道图.png';

export default function MapSwitch() {
    const [expanded, setExpanded] = useState(false);
    const [activeMap, setActiveMap] = useState('tdtVector'); // 默认选中街道图
    const map = useMap();
    const containerRef = useRef(null);

    // 初始化时检查当前激活的底图
    useEffect(() => {
        if (map) {
            const baseLayers = map.getLayers().getArray().filter(layer => layer.get('isBaseLayer'));
            for (const layer of baseLayers) {
                if (layer.getVisible()) {
                    const type = layer.get('type');
                    if (type) {
                        setActiveMap(type);
                        break;
                    }
                }
            }
        }
    }, [map]);

    // 添加点击空白处收起选项的功能
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (containerRef.current && !containerRef.current.contains(event.target) && expanded) {
                setExpanded(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [expanded]);

    const toggleExpand = () => {
        setExpanded(!expanded);
    };

    const switchBaseMap = (type) => {
        // 更新选中状态
        setActiveMap(type);
        
        // 切换底图
        if (map) {
            const baseLayers = map.getLayers().getArray().filter(layer => layer.get('isBaseLayer'));
            
            baseLayers.forEach(layer => {
                const layerType = layer.get('type');
                layer.setVisible(layerType === type);
            });
        }
    };

    return (
        <div className="map-switch-container" ref={containerRef}>
            <DarkBtn 
                icon={<MenuOutlined />} 
                title="底图切换" 
                onClick={toggleExpand}
            />
            
            <div className={`map-options ${expanded ? 'expanded' : ''}`}>
                <div className="map-cards">
                    <Card 
                        className={`map-card ${activeMap === 'satellite' ? 'active' : ''}`}
                        onClick={() => switchBaseMap('satellite')}
                        bordered={false}
                        bodyStyle={{ padding: 0, height: '100%', overflow: 'hidden' }}
                    >
                        <div className="card-content">
                            <div className="img-container">
                                <img src={satelliteImg} className="card-img" alt="影像图" />
                            </div>
                            <div className="card-title">影像图</div>
                            {activeMap === 'satellite' && <CheckOutlined className="check-icon" />}
                        </div>
                    </Card>
                    <Card 
                        className={`map-card ${activeMap === 'tdtTer' ? 'active' : ''}`}
                        onClick={() => switchBaseMap('tdtTer')}
                        bordered={false}
                        bodyStyle={{ padding: 0, height: '100%', overflow: 'hidden' }}
                    >
                        <div className="card-content">
                            <div className="img-container">
                                <img src={terrainImg} className="card-img" alt="地形图" />
                            </div>
                            <div className="card-title">地形图</div>
                            {activeMap === 'tdtTer' && <CheckOutlined className="check-icon" />}
                        </div>
                    </Card>
                    <Card 
                        className={`map-card ${activeMap === 'tdtVector' ? 'active' : ''}`}
                        onClick={() => switchBaseMap('tdtVector')}
                        bordered={false}
                        bodyStyle={{ padding: 0, height: '100%', overflow: 'hidden' }}
                    >
                        <div className="card-content">
                            <div className="img-container">
                                <img src={streetImg} className="card-img" alt="街道图" />
                            </div>
                            <div className="card-title">街道图</div>
                            {activeMap === 'tdtVector' && <CheckOutlined className="check-icon" />}
                        </div>
                    </Card>
                </div>
            </div>
        </div>
    );
} 